import Vue from 'vue';
import oolongDialog from './oolong-dialog.vue';
import oolongIcon from '../icon';
import oolongButton from '../button';
import {camelcaseToHyphen} from '../../utils/assist';
import Locale from '../../mixins/locale';

const prefixCls = 'oolong-modal-confirm';
oolongDialog.newInstance = properties => {
  const _props = properties || {};
  let props = '';
  Object.keys(_props).forEach(prop => {
    props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
  });
  const div = document.createElement('div');
  div.innerHTML = `
        <oolong-dialog${props}  :visible="visible" :width="width" :scrollable="scrollable">
            <div class="${prefixCls}">
                <div class="${prefixCls}-head">
                    <div class="${prefixCls}-head-title" v-html="title"></div>
                </div>
                <div class="${prefixCls}-body">
                    <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
                    <div v-html="body"></div>
                </div>
                <div class="${prefixCls}-footer">
                    <oolong-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</oolong-button>
                    <oolong-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</oolong-button>
                </div>
            </div>
        </oolong-dialog>
    `;
  document.body.appendChild(div);

  const dialog = new Vue({
    el: div,
    mixins: [ Locale ],
    components: {
      oolongDialog,
      oolongButton,
      oolongIcon
    },
    data: Object.assign(_props, {
      visible: false,
      width: 416,
      title: '',
      body: '',
      iconType: '',
      iconName: '',
      okText: undefined,
      cancelText: undefined,
      showCancel: false,
      loading: false,
      buttonLoading: false,
      scrollable: false
    }),
    computed: {
      iconTypeCls () {
        return [
          `${prefixCls}-body-icon`,
          `${prefixCls}-body-icon-${this.iconType}`
        ];
      },
      iconNameCls () {
        return [
          'oolong-icon',
          `oolong-icon-${this.iconName}`
        ];
      },
            localeOkText () {
                if (this.okText) {
                    return this.okText;
                } else {
                    return this.t('i.modal.okText');
                }
            },
            localeCancelText () {
                if (this.cancelText) {
                    return this.cancelText;
                } else {
                    return this.t('i.modal.cancelText');
                }
            }
    },
    methods: {
      cancel () {
        this.$children[0].visible = false;
        this.buttonLoading = false;
        this.onCancel();
        this.remove();
      },
      ok () {
        if (this.loading) {
          this.buttonLoading = true;
        } else {
          this.$children[0].visible = false;
          this.remove();
        }
        this.onOk();
      },
      remove () {
        setTimeout(() => {
          this.destroy();
        }, 300);
      },
      destroy () {
        this.$destroy();
        document.body.removeChild(this.$el);
        this.onRemove();
      },
      onOk () {
      },
      onCancel () {
      },
      onRemove () {
      },
      callback4fc(){
      }
    }
  });

  return {
    show (props) {
      alert("dialog.$children::::" + dialog.$children[0]);
      dialog.showCancel = props.showCancel;
      dialog.iconType = props.icon;

      switch (props.icon) {
        case 'info':
          dialog.iconName = 'information-circled';
          break;
        case 'success':
          dialog.iconName = 'checkmark-circled';
          break;
        case 'warning':
          dialog.iconName = 'android-alert';
          break;
        case 'error':
          dialog.iconName = 'close-circled';
          break;
        case 'confirm':
          dialog.iconName = 'help-circled';
          break;
      }

      if ('width' in props) {
        dialog.width = props.width;
      }

      if ('title' in props) {
        dialog.title = props.title;
      }

      if ('content' in props) {
        dialog.body = props.content;
      }

      if ('okText' in props) {
        dialog.okText = props.okText;
      }

      if ('cancelText' in props) {
        dialog.cancelText = props.cancelText;
      }

      if ('onCancel' in props) {
        dialog.onCancel = props.onCancel;
      }

      if ('onOk' in props) {
        dialog.onOk = props.onOk;
      }

      // async for ok
      if ('loading' in props) {
        dialog.loading = props.loading;
      }

      if ('scrollable' in props) {
        dialog.scrollable = props.scrollable;
      }

      // notice when component destroy
      dialog.onRemove = props.onRemove;

      dialog.$children[0].visible = true;
    },
    remove () {
      dialog.$children[0].visible = false;
      dialog.buttonLoading = false;
      dialog.remove();
    },
    component: dialog
  };
};

export default oolongDialog;
